<template>
	<view class="container">
		<view class="top-view">
			<view>检查人:{{name}}</view>
			<view>检查对象:{{target}}</view>
		</view>
		
		<view v-for="(item, index) in list" :key="item.id">
			<view class="item-title">{{item.sortName}}</view>
			<view v-for="(subItem, subIndex) in list[index].list" :key="subItem.id" class="subItem">
				<view class="title">
					{{subIndex + 1}}.{{subItem.sortName}}
				</view>
				
				<view class="options">
					  <u-radio-group
					    v-model="subItem.result"
					  >
					    <u-radio
					      v-for="(option, optionIndex) in subItem.option"
					      :name="option.val"
					    >
							{{option.label}}
					    </u-radio>
					  </u-radio-group>
				</view>
				
				<view>
					<u-upload width="140" height="140"
						:action="action" 
						:form-data="formData" 
						:header="header"
						@on-success="onSuccess"
						@on-remove="onRemove"
						:index="`${index}|${subIndex}`"
						:auto-upload="true">
					</u-upload>
				</view>
			</view>
		</view>

		
		<view class="action-view">
			<x-button title="确认" @click="addClick"></x-button>
		</view>
	</view>
</template>

<script>
	import { getXjProjectItem, addRecord } from '@/api/xj.js'
	import XButton from '@/components/x-button.vue'
	import { formatDateByTimestamp } from '@/utils/utils.js'
	import { http } from '@/api/service.js'
	export default {
		components: {
			XButton
		},
		data() {
			return {
				name: '',
				target: '',
				list: [],
				
				action: '',
				formData: {
					'bizType': 'xj-check'
				},
				header: {
					ticket: '',
				},
			}
		},
		onLoad(options) {
			console.log(options)
			
			this.targetClassId = options.targetClassId;
			this.targetId = options.targetId;
			this.getTargetItem();
			
			this.action = `${http.config.baseURL}pad/upload/file`;
			this.header.ticket = uni.getStorageSync('ticket');
		},
		methods: {
			getTargetItem() {
				getXjProjectItem(this.targetId).then(res => {
					console.log(res);
					this.name = res.data.name;
					this.target = res.data.target;
					this.list = res.data.parentList;
				})
			},
			
			addClick() {
				let recordList = [];
				console.log(this.list);
				for (let index in this.list) {
					const item = this.list[index];
					for (let subIndex in item.list) {
						const subItem = item.list[subIndex];
						if (!this.$u.test.isEmpty(subItem.result)) {
							let record = {
								targetProjectValueId: subItem.id,
								sortName: subItem.sortName,
								recordSortValue: subItem.result,
								url: subItem.url,
							}
							recordList.push(record);
						}
					}
				}
				
				const params = {
					time: formatDateByTimestamp(Date.now(), 'yyyy-mm-dd'),
					targetId: this.targetId,
					targetClass: this.targetClassId,
					list: recordList
				}
				
				const targetRecord = JSON.stringify(params);
				console.log(targetRecord);
				addRecord(targetRecord).then(res => {
					console.log(res);
					this.$u.toast('巡检提交成功')
					setTimeout(function() {
						uni.navigateBack({});
					}, 1000);
				})
			},
			
			onSuccess(data, index, lists, name) {
				const indexList = name.split('|');
				this.setCover(lists, parseInt(indexList[0]), parseInt(indexList[1]))
			},
			
			onRemove(index, lists, name) {
				const indexList = name.split('|');
				this.setCover(lists, parseInt(indexList[0]), parseInt(indexList[1]))
			},
			
			setCover(lists, index, subIndex) {
				let item = this.list[index].list[subIndex];
				
				let imageList = [];
				for (let imageIndex in lists) {
					const image = lists[imageIndex];
					if (image.progress === 100) {
						imageList.push(image.response.data);
					}
				}
				item.url = imageList.join(',');
				console.log(item);
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}
	
	.container{
		padding-left: $app-page-padding;
		padding-right: $app-page-padding;
	}
	
	.top-view{
		background-color: #FFFFFF;
		padding: 30rpx;
		border-radius: 20rpx;
		font-size: 34rpx;
		color: $app-font-color;
		font-weight: bold;
	}
	
	.item-title{
		font-size: 30rpx;
		color: $app-font-color;
		margin-top: 30rpx;
	}
	
	.subItem{
		margin-top: 10rpx;
		margin-bottom: 30rpx;
		color: $app-font-color;
		background-color: #FFFFFF;
		padding: 30rpx;
		
		.title{
			color: $app-font-color;
			font-size: $app-font-size-lg;
		}
		
		.options{
			display: flex;
			flex-direction: row;
			margin-top: 20rpx;
			
			.option{
				margin-left: 20rpx;
			}
		}
		
	}


	.action-view {
		margin-top: 150rpx;
		margin-bottom: 30rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
